<template>
  <div class="p-5">
    <n-form class="" ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="80">
      <n-form-item label="原密码" path="opassword">
        <n-input type="password" show-password-on="mousedown" v-model:value="form.opassword" placeholder="原密码"/>
      </n-form-item>

      <n-form-item label="新密码" path="password">
        <n-input type="password" show-password-on="mousedown" v-model:value="form.password" placeholder="新密码"/>
      </n-form-item>

      <n-form-item label="确认秘密" path="repassword">
        <n-input type="password" show-password-on="mousedown" :disabled="!form.password"
                 v-model:value="form.repassword" placeholder="新确认秘密"/>
      </n-form-item>

      <div class="flex justify-end">
        <n-button type="primary" @click="onSubmit" :loading="loading">
          立即修改
        </n-button>
      </div>

    </n-form>
  </div>
</template>

<script setup>
// 引入CompositionAPI
import {ref, reactive} from "vue";

// 引入 naive-ui 组件
import {NButton, NInput, NForm, NFormItem, createDiscreteApi} from "naive-ui";

// formRef 实例
const formRef = ref();

// 加载中
const loading = ref(false);

// 响应式数据
const form = reactive({
  opassword: "",
  password: "",
  repassword: "",
});

// 规则
const rules = {}


// 提交表单
const onSubmit = () => {
  formRef.value.validate(async (error) => {
    if (!error) {


      const {error, data} = await useupdatePasswordApi(form);

      if (error.value) return;


      const {message} = createDiscreteApi(["message"]);

      message.success("修改密码成功");

      console.log(data);

      // 退出登录
      await useLogout();

    }
  })
}

// 回车事件
useEnterEvent(() => onSubmit());

// 导航栏标题
useHead({title: "修改密码"})

// 为你的页面组件定义元数据。
definePageMeta({
  title: "修改密码",
});
</script>
